import { Button, Layout, Segmented } from "antd"
import MenuTree from "./MenuTree";
import { ThemeContextType, useTheme } from "../../hooks/useTheme";
import { CustomIcon, Title } from "../../components";
import styles from './index.module.less'
import { useEffect, useState } from "react";
import useScreen from "../../hooks/useScreen";
import { useNavigate, Outlet, useLocation } from "react-router-dom";

const MyFiles = () => {
    const { Content, Sider } = Layout;
    const { theme }: ThemeContextType = useTheme();
    const [width, setWidth] = useState(245);
    const [isResizing, setIsResizing] = useState(false);
    const [startX, setStartX] = useState(0);
    const [initialWidth, setInitialWidth] = useState(0);
    const [isOpen, setIsOpen] = useState<boolean>(false)
    const location = useLocation();
    const navigate = useNavigate();
    useEffect(() => {
        const handleMouseMove = (e: any) => {
            if (isResizing) {
                e.preventDefault()
                const delta = e.clientX - startX;
                let wIsOpen = initialWidth + delta <= 245
                setWidth(wIsOpen ? 245 : initialWidth + delta);
            }
        };

        const handleMouseUp = () => {
            setIsResizing(false);
        };

        document.addEventListener('mousemove', handleMouseMove);
        document.addEventListener('mouseup', handleMouseUp);

        return () => {
            document.removeEventListener('mousemove', handleMouseMove);
            document.removeEventListener('mouseup', handleMouseUp);
        };
    }, [isResizing, startX, initialWidth]);
    const handleMouseDown = (e: any) => {
        setIsResizing(true);
        setStartX(e.pageX);
        setInitialWidth(width);
    };
    return <Layout className={styles.myFilesBox}>
        <Layout>
            <Sider
                width={!isOpen ? width : 1}
                className={styles.siderBox}
                theme={theme === 'light' ? 'light' : 'dark'}
                collapsible
                collapsedWidth="1"
                trigger={null}>
                <div style={{ overflow: 'hidden' }}>
                    <div className={styles.header}>
                    <Button type='text' onClick={() => {navigate('/start')}} icon={<CustomIcon style={{ fontSize: 20 }} str={'arrow-left-s-line'} />} />
                        <Title style={{ margin: 0, cursor: 'pointer' }} title={<span onClick={() => navigate('/myfile')}>我的文件</span>} level={4} />
                        <Button type='text' icon={<CustomIcon style={{ fontSize: 18 }} str={'add-line'} />} />
                    </div>
                    <MenuTree />
                </div>
                <div
                    id="dragHandle"
                    className={styles.dragHandle}
                    onMouseDown={handleMouseDown}
                >
                    <div onClick={() => setIsOpen(!isOpen)} className={styles.screenBox}>
                        {isOpen ? <CustomIcon str={'arrow-right-wide-line'} /> :
                            <CustomIcon str={'arrow-left-wide-line'} />}
                    </div>
                </div>
            </Sider>
            <Content className={styles.contentBox}>
                {
                    location.pathname === '/myfile' ? '这里搞一些吊炸天的Logo和水印' : <Outlet />
                }
            </Content>
        </Layout>
    </Layout>
}

export default MyFiles;